<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>

<!--multi-select-->
<link rel="stylesheet" type="text/css" href="/js/jquery-multi-select/css/multi-select.css" />

<!--file upload-->
<link rel="stylesheet" type="text/css" href="/css/bootstrap-fileupload.min.css" />

<!-- page heading start-->
<div class="page-heading">
    <h3>
        科目添加
    </h3>
    <ul class="breadcrumb">
        <li>
            <a href="#"> 科目管理 </a>
        </li>
        <li class="active"> 科目添加 </li>
    </ul>
</div>
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel panel-info">
                <header class="panel-heading">
                    上传文件
                </header>
                <div class="panel-body">
<%--                    1. 下载模板--%>
                    <div class="form-group col-md-12">
                        <label class="control-label col-lg-2 text-info text-right" style="padding-top: 5px"> Step 1: 下载模板</label>
                            <div class="col-md-9">
                                <a href="https://edu-ywb.oss-cn-beijing.aliyuncs.com/template.xlsx" download="template.xlsx" class="btn btn-info">click me</a>
                            </div>
                    </div>
<%--                    2. 选择文件--%>

<%--                 enctrpe将提交的数据以form-data的形式提交--%>
                    <form action="/subject/addSubject" method="post" enctype="multipart/form-data" onsubmit="return addSubjectCheck()">
<%--                    3. 上传文件--%>
                        <div class="form-group col-md-12">
                            <label class="control-label col-lg-2 text-info text-right" style="padding-top: 5px"> Step 2: 选择文件</label>
                            <div class="controls col-md-9">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <%--                                            整个按钮格式--%>
                                    <span class="btn btn-default btn-file" style="margin-left: 0px">
<%--                                                文字--%>
                                        <span class="fileupload-new"><i class="fa fa-paper-clip"></i> click me </span>
<%--                                            选择文件后转换的文字--%>
                                        <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<%--                                            存放文件的input标签--%>
                                        <input id="fileupload" type="file" class="default" name="file"/>
                                    </span>
                                    <%--                                  文件列表--%>
                                    <span class="fileupload-preview" style="margin-left:5px;"></span>
                                    <%--                                    使用a标签跳转--%>
                                    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none; margin-left:5px;"></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group controls col-md-12">
                            <label class="control-label col-lg-2 text-info text-right" style="padding-top: 5px"> Step 3: 上传文件</label>
                            <div class="col-md-9">
                                <button class="btn btn-info" type="submit" > click me </button>
                            </div>
                        </div>
                    </form>

                </div>
            </section>
        </div>
    </div>
</div>
<!--body wrapper end-->

<script>
    function addSubjectCheck(){
        toastr.success('上传成功')
        return true;
    }
</script>

<!--file upload-->
<script type="text/javascript" src="/js/bootstrap-fileupload.min.js"></script>
</html>
